<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar :title="$route.name" />
    <!-- 轮播图 -->
    <van-swipe :autoplay="1000">
      <van-swipe-item v-for="item in bannerlist" :key="item.id">
        <img class="imgUrl" :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航展示 
    van-grid
    gutter	格子之间的间距，默认单位为px 默认是0
    border	是否显示边框	boolean	true
    column-num	列数 默认是4
    -->
    <van-grid :column-num="5" :border="false">
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/seckill.png')" />
        <p class="navtitle">限时秒杀</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/top.png')" />
        <p class="navtitle">畅销商品</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/brand.png')" />
        <p class="navtitle">品质大牌</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/selfsupport.png')" />
        <p class="navtitle">小U自营</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/integral.png')" />
        <p class="navtitle">积分商城</p>
      </van-grid-item>
    </van-grid>
    <!-- 首页商品切换 -->
    <van-tabs type="card">
      <van-tab title="热门推荐">
        <van-card
        @click='goDetail(item.id)'
          v-for="item in hotList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="上新推荐">
        <van-card
         @click='goDetail(item.id)'
          v-for="item in newList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="所有商品">
        <van-card
         @click='goDetail(item.id)'
          v-for="item in goodsList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {getBanner,homeGoods} from '../request/api'
export default {
  data() {
    return {
      bannerlist:[],
      newList:[],
      hotList:[],
      goodsList:[]
    };
  },
  mounted(){
    //组件一加载调用轮播图接口
    getBanner().then((res)=>{
      if(res.code ==200){
        this.bannerlist = res.list
      }
    })
    //组件一加载调用首页列表
    homeGoods().then((res)=>{
      console.log(res,'首页列表');
      if(res.code==200){
      this.hotList = res.list[0].content;
      this.newList = res.list[1].content;
      this.goodsList = res.list[2].content;
      }
    })
  },
  methods:{
      //跳转到详情页面
      goDetail(id){
        this.$router.push({
          path:"/detail",
          query:{
            id
          }
        })
      }
  }

};
</script>

<style scoped>
.imgUrl {
  width: 100%;
  height: 250px;
}
.navtitle {
  font-size: 14px;
}
</style>
